<template>
	<view class="wrap" :style="colorStyle">
		<view class="top_box">
			<view class="nav_box" :style="{height:navigatorHeight+'px'}">
				<view class="sys_bar" :style="{height:statusBarHeight+'px'}"></view>
				<view class="nav_info">
					<view class="back_icon" @click="goBack">
						<view class="iconfont icon-fanhui2"></view>
					</view>
					<view class="sys_title"></view>
					<view class="back_icon"></view>
				</view>
			</view>
		</view>
		<view class="main" :style="{paddingTop:navigatorHeight+50+'px'}">
			<view class="title">
				增值服务
			</view>
			<view class="img1">
				<image src="../static/imgs/inlet1.png" mode="aspectFill"></image>
			</view>
			<view class="img2">
				<!-- <image src="../static/imgs/inlet2.png" mode="aspectFill"></image> -->
				<image :src="`${HTTP_REQUEST_URL}/imgs/after_auth.png`" mode="aspectFill"></image>
			</view>
			<view class="footer flex_fc">
				<view class="btn_box flex_c" @click="verification">
					<!-- <view class="tip_box">
						限时特惠
					</view> -->
					<view class="text1">
						实名认证
					<!-- 	<view>实名认证￥<text style="font-size: 40rpx;">0</text>/年</view>
						<view class="text2">
							需要提供营业执照
						</view> -->
					</view>
					<!-- <view style="font-size: 26rpx;margin-left: 13rpx;">
						<text class="mid_line">￥1999</text>/ 年
					</view> -->
				</view>
				<!-- <view class="btn_box2">
					<view class="text1 flex_s" @click="$util.goPage('/pages/new_page/cert/counterCert')">
						<text class="t1">个人柜台认证￥0/ 年</text>
						<text class="iconfont icon-xiangyou"></text>
						<view class="t2"><text class="mid_line">￥999</text>/ 年</view>
					</view>
					<view class="text2">
						推广期间限时免费
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {HTTP_REQUEST_URL} from "@/config/app.js"
	import colors from "@/mixins/color";
	export default {
		mixins: [colors],
		data() {
			return {
				navigatorHeight: '',
				statusBarHeight: '',
				HTTP_REQUEST_URL
			};
		},
		onLoad() {
			this.getSystemInfo()
		},
		methods: {
			verification() {
				uni.navigateTo({
					url: '/pages/new_gold/verification/verification'
				})
			},
			goBack(){
				uni.navigateBack()
			},
			getSystemInfo() {
				uni.getSystemInfo({
					success: res => {
						const system = res
						this.statusBarHeight = system.statusBarHeight //状态栏高度
						//获取胶囊信息
						const menu = uni.getMenuButtonBoundingClientRect()
						// this.searchLeft = this.menu.left //搜索按钮的右偏移量
						//导航栏高度= （胶囊顶部距离-状态栏高度） x 2 + 胶囊的高度
						this.navigatorHeight = (menu.top - system.statusBarHeight) * 2 + menu.height + system
							.statusBarHeight


					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		min-height: 100vh;
		background: linear-gradient(180deg, #FFFFFF 0%, #F3E4B4 100%);

		.main {
			.img1{
				width: 630rpx;
				height: 466rpx;
				margin: 0 auto 52rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.img2{
				width: 614rpx;
				height: 276rpx;
				margin: 0 auto 88rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.mid_line {
				text-decoration: line-through;
			}
			.footer {
				.btn_box2{
					margin-top: 50rpx;
					.text1{
						margin-bottom: 12rpx;
						.iconfont{
							font-size: 20rpx;
							font-weight: 600;
							margin: 0 5rpx;
							color: #303030;
						}
						.t1{
							font-size: 28rpx;
							font-weight: 550;
							color: #303030;
						}
						.t2{
							font-size: 26rpx;
							color: #808080;
						}
					}
					.text2{
						color: #808080;
						font-size: 22rpx;
						text-align: center;
					}
				}
				.btn_box {
					position: relative;
					font-size: 32rpx;
					color: #fff;
					font-weight: 550;
					width: 686rpx;
					height: 108rpx;
					border-radius: 54px;
					background: var(--view-theme);
					// padding-left: 100rpx;
					.tip_box{
						position: absolute;
						left: 60rpx;
						top: -23rpx;
						width: 127rpx;
						height: 46rpx;
						text-align: center;
						line-height: 46rpx;
						border-radius: 9rpx;
						background: linear-gradient(90deg, #FF5733 0%, #D43030 100%);
						border: 1px solid #FFFFFF;
						color: #FFFBD6;
						font-size: 26rpx;
					}
					.text1 {
						text-align: center;
						
					}

					.text2 {
						font-size: 26rpx;
					}
				}
			}

			.title {
				font-size: 50rpx;
				font-weight: 700;
				text-align: center;
				color: #303030;
				margin-bottom: 50rpx;
			}
		}

		.top_box {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 99;

			.nav_box {

				background: #fff;

				.nav_info {
					height: 88rpx;
					flex-grow: 1;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 27rpx;
					font-size: 30rpx;

					.back_icon {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 32rpx;
						height: 32rpx;

						.iconfont {
							font-size: 40rpx;
							font-weight: 550;
							color: #000;
						}
					}

					.sys_title {
						color: #3D3D3D;
						text-align: center;
					}
				}

			}
		}
	}
</style>